<template>
    <div id='' class='role_content'>
        <i-table class="table_content" ref="myTable" :search="getSearch" :table="getTbale" :pageConfig="pageConfig" @onSelectAll="onSelect" @onSelectOnchange="onSelect" />
        <Modal v-model="modalShow" width="1200" :mask-closable="false" :title="modalTitle">
            <components v-if="modalShow" :is="comps" ref="coms" />
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary" @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { config } from './role/table_config'
import addUpdata from "./role/add-updata.vue";
export default {
    name: '',
    props: [''],
    data() {
        return {
            search: {}, // 查询配置对象
            tableConfig: {}, // 表格配置对象
            pageConfig: config.page, // 翻页器配置
            comps: addUpdata,
            modalShow: false,
            modalTitle: '',
            removeList: [],
        };
    },
    components: {},
    computed: {
        getSearch() {
            this.search = icu.util.deepClone(config.search);// 为不改变原始配置数据，进行深度克隆。
            return this.search;
        },
        getTbale() {
            this.tableConfig = icu.util.deepClone(config.table); // 深度克隆表格配置。
            this.tableConfig.event = {
                edit: this.edit,
                add: this.add,
                remove: this.remove,
                removeLot: this.removeLot
            }
            return this.tableConfig;
        }
    },
    beforeMount() { },
    mounted() {
        this['$api'] = this.$Api.get(['systemSetup:systemManger']);
    },
    methods: {
        add(row) {
            this.modalShow = true;
            this.modalTitle = '新增';
            this.getAuthenMenuTree(false);
            this.deptTreeAll(false);
        },
        async edit(event, row) {
            this.modalShow = true;
            this.modalTitle = '编辑';
            let deptTreeAllList = await this.deptTreeAll(true);
            let authenMenuTreeList = await this.getAuthenMenuTree(true);
            this.$http.$get('roleDetail', { params: { id: row.id } }).then(res => {
                if (res.code == 200) {
                    this.setCheckLists(res.data, deptTreeAllList);
                    this.setCheckMenuLists(res.data, authenMenuTreeList);
                    let treeData = { deptTreeAllList, authenMenuTreeList }
                    this.$refs.coms.setData(res.data, treeData);
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        // 设置勾选
        setCheckLists(data, treeList) {
            treeList.forEach(item => {
                if (data.userIds && data.userIds.includes(item.id)) {
                    item.checked = true;
                }
                if (item.children && item.children.length > 0) {
                    this.setCheckLists(data, item.children)
                }
            })
        },
        setCheckMenuLists(data, treeList) {
            treeList.forEach(item => {
                if (item.children && item.children.length > 0) {
                    this.setCheckMenuLists(data, item.children)
                } else {
                    if (data.menuIds && data.menuIds.includes(item.id)) {
                        item.checked = true;
                    }
                }
            })
        },
        // 获取关联人员树
        deptTreeAll(flag) {
            return new Promise((resolve, reject) => {
                this.$http.$get('deptTreeAll', { params: {} }).then(res => {
                    if (res.code == 200) {
                        if (!flag) {
                            this.$refs.coms.setTreeList('glryTree', res.data);
                        }
                        resolve(res.data)
                        return
                    }
                    this.$Message.error(res.msg);
                })
            })
        },
        // 获取功能权限树
        getAuthenMenuTree(flag) {
            return new Promise((resolve, reject) => {
                this.$api.roleAuthenMenuTree({ systemType: '1' }, data => {
                    if (!flag) {
                        this.$refs.coms.setTreeList('gnqxTree', data.function);
                    }
                    resolve(data.function)
                })
            })
        },
        getList() {
            this.$refs.myTable.seach();
        },
        ok() {
            this.$refs.coms.getFormData(data => {
                this.$http.$post('permissionRoleSaveUserRole', { data }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success('保存成功');
                        this.cancel();
                        this.getList();
                        return
                    }
                    this.$Message.error(res.msg);
                })
            })
        },
        cancel() {
            this.modalShow = false
        },
        remove(item, row) {
            this.$Modal.confirm({
                title: '删除确认',
                content: '确认删除该条数据？',
                onOk: () => {
                    this.$http.$post('roleDelete', { data: [row.id] }).then(res => {
                        if (res.code == 200) {
                            this.$Message.success('删除成功');
                            this.getList()
                            this.removeList = []
                            return
                        }
                        this.$Message.error(res.msg);
                    })
                },
            });
        },
        removeLot() {
            if (this.removeList.length === 0) {
                this.$Message.error('请选择要删除的数据！');
                return
            }
            this.$Modal.confirm({
                title: '批量删除确认',
                content: '确认删除选中数据？',
                onOk: () => {
                    this.$http.$post('roleDelete', { data: this.removeList }).then(res => {
                        if (res.code == 200) {
                            this.$Message.success('删除成功');
                            this.getList()
                            this.removeList = []
                            return
                        }
                        this.$Message.error(res.msg);
                    })
                }
            });
        },
        onSelect(selection) {
            let ids = selection.map(item => item.id)
            this.removeList = ids
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
/deep/.ivu-modal-body {
    height: 600px;
    overflow: auto;
}
.role_content {
    background-color: #fff;
    padding: 0 20px;
    width: 100%;
    height: 800px;
    .table_content {
        height: 752px;
        overflow: auto;
    }
}
</style>